<template>
  <div id="detail-info">
    <div class="detail-item" v-for="(item, index) in detail_info" :key="index">
      <div class="title">
        {{ item.key }}
      </div>
      <div class="desc">
        {{ item.desc }}
      </div>
      <div class="info">
        <div
          class="info-item"
          v-for="(item_list, index_list) in item.list"
          :key="index_list"
        >
          <img
            src="~assets/img/img_error.png"
            v-lazy="item_list"
            alt=""
            @load="imgLoad"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detail_info: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    imgLoad() {
      this.$emit('img-load-finished')
    },
  },
}
</script>

<style lang="less" scoped>
#detail-info {
  border-bottom: 5px solid #eeeeee;
  .detail-item {
    .title {
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .desc {
      padding: 0 10px;
    }
    .info {
      .info-item {
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
